海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器

您所在的位置：网站首页 › 监控摄像头 sdk › 海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器

海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器

2024-07-15 00:38| 来源: 网络整理| 查看: 265

在vue中实现海康摄像头播放，采用海康web无插件3.2开发包，采用Nginx代理IIS服务器实现；

1 摄像头要求，支持websocket 2 Nginx反向代理的结构

在这里插入图片描述

3 vue前端显示视频流代码

参考地址： https://blog.csdn.net/Vslong/article/details/118517641?spm=1001.2101.3001.6650.4&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-118517641-blog-123397690.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-4-118517641-blog-123397690.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=4

3.1 在海康威视的官网进行下载开发包

https://open.hikvision.com/download/5cda567cf47ae80dd41a54b3?type=10&id=4c945d18fa5f49638ce517ec32e24e24 在这里插入图片描述

3.2 配置自己的webVideo.js和html

（1）新建webVideo.js文件，assets/script/webVideo.js，内容如下：

export function WebVideo() { this.g_iWndIndex = 0 this.szDeviceIdentify = '' this.deviceport = '' this.rtspPort = '' this.channels = [] this.ip = '' this.port = '80' this.username = '' this.password = '' this.init = function(ip, username, password) { this.ip = ip this.username = username this.password = password // var self = this // 检查插件是否已经安装过 // var iRet = WebVideoCtrl.I_CheckPluginInstall(); // if (-1 == iRet) { // alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！"); // return; // } // 初始化插件参数及插入插件 WebVideoCtrl.I_InitPlugin(454, 315, { szColorProperty: 'plugin-background:#102749; sub-background:#102749; sub-border:#18293c; sub-border-select:red', bWndFull: true, // 全屏 // iPackageType: 2, iWndowType: 1, //分屏 bNoPlugin: true, // 支持无插件 cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); } }); } // 登录 this.clickLogin = function () { var self = this if ("" == self.ip || "" == self.port) { return; } debugger self.szDeviceIdentify = self.ip + "_" + self.port; WebVideoCtrl.I_Login(self.ip, 1, self.port, self.username, self.password, { success: function (xmlDoc) { setTimeout(function () { console.log('登录成功'); self.getChannelInfo(); self.getDevicePort(); }, 10); setTimeout(function() { self.clickStartRealPlay() }, 500) }, error: function (status, xmlDoc) { console.log('登录失败'); } }); } // 退出 this.clickLogout = function() { var self = this self.channels = [] if (null == self.szDeviceIdentify) { return; } var iRet = WebVideoCtrl.I_Logout(self.szDeviceIdentify); if (0 == iRet) { self.getChannelInfo(); self.getDevicePort(); } } // 获取通道 this.getChannelInfo = function() { var self = this self.channels = [] if (null == self.szDeviceIdentify) { return; } // 模拟通道 WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("VideoInputChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Camera " + (i { this.webVideo.init(this.hkvInfo.ip, this.hkvInfo.username, this.hkvInfo.password) this.webVideo.clickLogin() }) }, stopVideoPlay() { this.webVideo.clickStopRealPlay() this.webVideo.clickLogout() } } } .plugin { width: 500px; height: 300px; }

（3）引用海康开发包将海康开发包，放到Public文件下

在这里插入图片描述

在index.html文件中引用相关js文件，如下图在这里插入图片描述

4 IIS正常发布网站

网站端口号为Nginx中配置的端口号9007

5 nginx环境部署 5.1 nginx配置

海康无插件开发包中地址打开nginx.conf文件 WEB无插件开发包_20211014_20211019120439\nginx-1.10.2\conf\nginx.conf

修改内容如下，本地IP为10.196.43.220,127.0.0.1/localhost都可换成10.196.43.220 本地IIS配置IP端口号：127.0.0.1:9007 Nginx反向代理为localhost:9008

在这里插入图片描述

#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$http_user_agent" "$http_x_forwarded_for"'; access_log logs/access.log main; #access_log off; client_max_body_size 50m; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; upstream netitcast{ #代理http://netitcast server 127.0.0.1:9008 weight=2; #iis发布网站 weight权重 #server 127.0.0.1:7244 weight=1; } # 配置虚拟主机 server { listen 9007; #配置监听端口 server_name localhost; #配置服务器名称 #charset koi8-r; #字符集 koi8-r（俄罗斯） access_log logs/host.access.log main; #websocket相关配置 proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-real-ip $remote_addr; proxy_set_header X-Forwarded-For $remote_addr; location / { #location匹配 #root "../webs"; #文件地址 #index index.html index.htm; #文件首页 proxy_pass http://netitcast; #转发代理 upstream netitcast #proxy_redriedic index.html; } location ~ /ISAPI|SDK/ { if ($http_cookie ~ "webVideoCtrlProxy=(.+)") { proxy_pass http://$cookie_webVideoCtrlProxy; break; } } location ^~ /webSocketVideoCtrlProxy { #web socket proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header Host $host; if ($http_cookie ~ "webVideoCtrlProxyWs=(.+)") { proxy_pass http://$cookie_webVideoCtrlProxyWs/$cookie_webVideoCtrlProxyWsChannel?$args; break; } if ($http_cookie ~ "webVideoCtrlProxyWss=(.+)") { proxy_pass http://$cookie_webVideoCtrlProxyWss/$cookie_webVideoCtrlProxyWsChannel?$args; break; } } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # error_page 302 /50x.html; # location = /50x.html { # root html; # } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:!aNULL:!MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # } #} } 5.2 双击 start.bat 启动Nginx代理

在这里插入图片描述

6 前端访问

http://10.196.43.220:9007 访问地址一定要是本机的IP：10.196.43.220 127.0.0.1/localhost访问都是不会显示视频画面在这里插入图片描述

【本文地址】

海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器

海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器

今日新闻

推荐新闻